<template>
  <div style="padding: 10px;">
    <el-row>
      <el-col :span="22">
        <el-form inline :model="form_data" ref="searchForm">
          <el-form-item label="装柜日期" prop="loadingTime">
            <el-date-picker
              v-model="loadingTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="number">
            <el-input placeholder="搜索柜号/合同号" v-model="form_data.number"></el-input>
          </el-form-item>
          <el-form-item prop="productNames">
            <el-select filterable   filterable placeholder="产品" v-model="form_data.productNames">
              <el-option v-for="item in product_list" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cargoOwnerId">
            <el-select filterable   filterable placeholder="货主" v-model="form_data.cargoOwnerId">
              <el-option v-for="item in owner_list" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="materialFlowType">
            <el-select filterable  placeholder="物流类型" v-model="form_data.materialFlowType">
              <el-option v-for="dict in dict.type.material_flow_type" :key="dict.value" :label="dict.label"
                         :value="dict.value"  ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getData" size="mini" type="primary">搜索</el-button>
            <el-button @click="resetData" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <div style="text-align: right;">
          <el-button type="primary" size="mini" @click="exportsData" >导出</el-button>
        </div>
      </el-col>
      <el-col>
        <el-table :data="table_data" :height="table_height" >
          <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
          <el-table-column label="柜号" prop="containerNumber" ></el-table-column>
          <el-table-column label="产品" prop="productNames" ></el-table-column>
          <el-table-column label="货主" prop="cargoOwnerName" ></el-table-column>
          <el-table-column label="物流类型" prop="materialFlowType" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.material_flow_type" :value="scope.row.materialFlowType"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="装货地" prop="areaName" ></el-table-column>
          <el-table-column label="目的港" prop="portName" ></el-table-column>
          <el-table-column label="装柜时间" prop="loadingTime" ></el-table-column>
          <el-table-column label="预计发运时间" prop="estimatedShipmentTime" ></el-table-column>
          <el-table-column label="预计开(船/车)时间" prop="estimatedDepartTime" ></el-table-column>
          <el-table-column label="实际开(船/车)时间" prop="actualDepartTime" ></el-table-column>
          <el-table-column label="实际到港时间" prop="actualArrivalTime" ></el-table-column>
          <el-table-column label="运输天数" prop="transitDays" ></el-table-column>
        </el-table>
        <pagination
          v-show="list_total>0"
          :total="list_total"
          :page.sync="list_params.pageNum"
          :limit.sync="list_params.pageSize"
          @pagination="getData"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { overseasTransportationEfficiency, overseasTransportationEfficiencyExport } from '@/api/report/report'
import {list as ownerList} from "@/api/base/owner";
import { list as capitalList } from "@/api/base/capital";
import { AllList, list as productList } from '@/api/product/info'
export default {
  name: "settlement_fruit",
  dicts:['order_product_type','material_flow_type'],
  data(){
    return {
      table_height:window.innerHeight - 300,
      list_total:0,
      list_params:{
        pageNum:1,
        pageSize:10
      },
      loadingTime:'',
      table_data:[],
      form_data:{
        type:'',
        number:'',
        productId:'',
        materialFlowType:'',
        cargoOwnerId:''
      },
      product_list:[],
      owner_list:[],
    }
  },
  created(){
    this.getProductList()
    this.getOwnerList()
  },
  methods:{
    getOwnerList(){
      ownerList({is_page:0}).then(res=>{
        this.owner_list = res.rows
      })
    },
    getProductList(){

      AllList({is_page:0}).then(res=>{
        this.product_list = res.rows
      })
    },
    resetData(){
      this.loadingTime = []
      this.$refs.searchForm.resetFields()
      this.getData()
    },
    getData() {
      console.log(this.loadingTime)
      this.form_data = {
        ...this.form_data,
        pageNum:this.list_params.pageNum,
        pageSize:this.list_params.pageSize
      }
      if (this.loadingTime) {
        this.form_data = {
          ...this.form_data,
          loadingTimeStart:this.loadingTime[0],
          loadingTimeEnd:this.loadingTime[1]
        }
      }
      overseasTransportationEfficiency(this.form_data,this.list_params).then(res=>{
        this.table_data = res.rows
        this.list_total = res.total
      })
    },
    exportsData(){
      overseasTransportationEfficiencyExport(this.form_data).then(res=>{
        const url= window.URL.createObjectURL(new Blob([res]));
        const link= document.createElement('a');
        link.href = url;
        link.download =`海外运输效率_${new Date().getTime()}.xlsx`;
        link.click();
      })
    }
  }
}
</script>

<style scoped>

</style>
